<template>
  <view style="background: #fff">
    <view class="pr" style="height: 416rpx; overflow: hidden; width: 760rpx">
      <image style="width: 100%" :src="navData.imgs" mode="widthFix" />
      <view style="bottom: 80rpx; left: 30rpx" class="pa">
        <view class="df aic">
          <image
            style="
              border: #fff 6rpx solid;
              width: 150rpx;
              height: 150rpx;
              border-radius: 50%;
              margin-right: 32rpx;
            "
            :src="nodeForm.avatar"
          />
          <view class="clo-fff">
            <view
              style="font-weight: 500; font-size: 45rpx; line-height: 55rpx"
              >{{ nodeForm.title }}</view
            >
            <view
              style="
                max-width: 340rpx;
                font-weight: 400;
                font-size: 25rpx;
                color: #ffffff;
                line-height: 33rpx;
              "
              class="f24 mt20 cont2"
              >{{ nodeForm.remark }}</view
            >
          </view>
        </view>
      </view>
    </view>

    <view class="mt10 p30">
      <u-search
        placeholder="搜索商品"
        :showAction="false"
        @custom="custom"
        :animation="false"
        v-model="search"
      ></u-search>
    </view>
    <view style="position: relative; top: -16px">
      <u-tabs
        :activeStyle="{
          color: '#1A1A1A',
          fontSize: '32rpx',
          fontWeight: 'bold',
        }"
        lineColor="#2AD03D"
        :list="tabList"
        @click="toTab"
      ></u-tabs>
      <u-empty
        marginTop="100"
        text="暂无评论"
        :show="isEmpty"
        mode="message"
        :icon="images.empty"
      >
      </u-empty>

      <view class="p30 dis_sb fww">
        <view class="bs" v-for="v in list" :key="v.id" style="width: 49%">
          <view
            style="
              width: 342rpx;
              height: 342rpx;
              overflow: hidden;
              border-radius: 15rpx;
            "
            class="bs"
          >
            <image
              style="width: 100%"
              :src="v.cover"
              mode="widthFix"
              @click="toDetails(v)"
            />
          </view>
          <view
            style="max-width: 367rpx; height: 40rpx; font-weight: 500;-webkit-line-clamp:1"
            class="cont1 p10 f32 fwb"
            >{{ v.title }}</view
          >

          <view class="dis_sb mt20 p10" style="position: relative; top: -16px">
            <view class="df aic">
              <view>
                <image
                  style="width: 40rpx; height: 40rpx; border-radius: 50%; margin-top: 16rpx;"
                  :src="v.avatar"
                />
              </view>
              <view class="ml10">
                <view
                  style="
                    max-width: 200rpx;
                    font-weight: 400;
                    font-size: 25rpx;
                    color: #000000;
                    line-height: 24rpx;
                    opacity: 0.9;
                  "
                  class="mt10 cont1"
                  >{{ v.userName }}</view
                >
                <view
                  style="
                    font-weight: 400;
                    font-size: 18rpx;
                    color: #000000;
                    line-height: 22rpx;
                    opacity: 0.7;
                  "
                  class="clo-666"
                  >{{ v.createTime }}</view
                >
              </view>
            </view>
            <view class="df aic">
              <image
                style="width: 30rpx; height: 30rpx"
                :src="
                  v.myLike == 0
                    ? `/static/tabbar/collect.png`
                    : `/static/tabbar/collect-active.png`
                "
                mode="widthFix"
                @click="toCollect(v)"
              />
              <view
                style="
                  font-weight: 400;
                  font-size: 26rpx;
                  color: #000000;
                  line-height: 32rpx;
                  opacity: 0.7;
                "
                class="ml10"
                >{{ v.totalLikeNum }}</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import images from "@/components/c-scroll-list/images.js";
import {
  init_backgroundList,
  init_noteList,
  init_updateLike,
  init_noteTypeMenu,
  init_nodeContext,
} from "@/api/node.js";

export default {
  data() {
    return {
      backgroundUrl: null,
      search: null,
      noteType: null,
      navData: {},
      nodeForm: {},
      isEmpty: false,
      images,
      tabList: [],
      list: [],
      isRoll: null,
      pageNum: 1,
      pageSize: 10,
    };
  },
  onShow() {
    this.getImg();
    this.getList();
    this.getTabList();
    this.getNode();
  },
  onReachBottom() {
    this.scrolltolower();
  },
  methods: {
    toTab(v) {
      this.noteType = v?.id;
      this.getList();
    },
    async getNode() {
      const res = await init_nodeContext();
      this.nodeForm = res;
      console.log("this.nodeForm :>> ", this.nodeForm);
    },
    async getTabList() {
      const res = await init_noteTypeMenu();
      this.tabList = [
        { id: null, name: "推荐" },
        ...res.map((e) => ({ id: e?.value, name: e?.label })),
      ];
    },
    scrolltolower() {
      if (this.isRoll) return;
      this.pageSize = this.pageSize + 10;
      this.getList();
    },
    async toCollect(v) {
      const { id, myLike } = v;
      // userId，nodeId，myCollect(0-否 1-收藏)
      const params = {
        noteId: id,
        myLike: myLike == 0 ? 1 : 0,
      };
      const res = await init_updateLike(params);
      if (res) {
        this.getList();
      }
    },
    async getImg() {
      const res = await init_backgroundList(3);
      this.navData = res;
    },
    async getList() {
      const params = {
        search: this.search,
        noteType: this.noteType,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      const res = await init_noteList(params);
      this.isEmpty = res?.list?.length == 0;
      this.isRoll = res?.list?.length == res?.total;
      this.list = res?.list;
      console.log("resrw :>> ", res);
    },
    custom(v) {
      console.log("v :>> ", v);
      this.search = v;
      this.getList();
    },
    toDetails(v) {
      uni.navigateTo({
        url: `/pages/note/noteDetails?noteId=${v?.id}`,
      });
    },
    async clickArticle() {
      // userId，nodeId，myCollect(0-否 1-收藏)
      const params = {
        noteId: id,
        myLike: myLike == 0 ? 1 : 0,
      };
      console.log("params :>> ", params);
      const res = await init_updateLike(params);
      if (res) {
        this.getList();
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.u-search__content__input {
  background-color: #f2f2f2 !important;
}
/deep/.u-search__content {
  background-color: #f2f2f2 !important;
}
</style>
